<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui, shrink-to-fit=no, viewport-fit=cover">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

	<title>{{project.title}} {{project.version}}</title>
	<style type='text/css'>
	/* Disable user selection to avoid strange bug in Chrome on Windows:
	* Selecting a text outside the canvas, then clicking+draging would
	* drag the selected text but block mouse down/up events to the engine.
	*/
	body {
	{{^DEFOLD_SCALE_MODE_IS_NO_SCALE}}
		position: fixed; /* Prevent overscroll */
	{{/DEFOLD_SCALE_MODE_IS_NO_SCALE}}
		margin:0;
		padding:0;
	}

	.canvas-app-container {
		width: 100%;
		height: 100%;
		position: absolute;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.canvas-app-container:-webkit-full-screen {
		/* Auto width and height in Safari/Chrome fullscreen. */
		width: auto;
		height: auto;
	}

	#canvas {
		outline: none;
		border: 0;
		width: 100%;
		vertical-align: bottom;
	}

	#canvas-container {
		position: relative;
	}

	canvas:focus, canvas:active {
		outline: none;
		border: 0;
		ie-dummy: expression(this.hideFocus=true);
		-moz-outline-style: none;
	}

	body, div {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	{{{DEFOLD_CUSTOM_CSS_INLINE}}}
	</style>
</head>

<body>

	<div id="app-container" class="canvas-app-container">
		<div id="running-from-file-warning" style="display: none; margin: 3em;">
			<h1>Running from local file ⚠️</h1>
			<p>It seems like you have opened this file by double-clicking on it. In order to test your build in a browser <b>you need to load this file from a web server</b>. You can either upload this file and the rest of the files from a Defold HTML5 bundle to a web hosting service OR host them using a local web server on your home network.</p>
			<p><a href="https://defold.com/manuals/html5/#testing-html5-build" target="_blank">Learn more about running a local web server in the Defold HTML5 manual</a>.</p>
		</div>
		<div id="webgl-not-supported" style="display: none; margin: 3em;">
			<h1>WebGL not supported ⚠️</h1>
			<p>WebGL is not supported by your browser - visit <a href="https://get.webgl.org/">https://get.webgl.org/</a> to learn more.</p>
		</div>
		<div id="canvas-container" class="canvas-app-canvas-container">
			<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="{{display.width}}" height="{{display.height}}"></canvas>
		</div>
		<div class="buttons-background">
{{#html5.show_fullscreen_button}}
			<div class="button" onclick="Module.toggleFullscreen();">Fullscreen</div>
{{/html5.show_fullscreen_button}}
{{#html5.show_made_with_defold}}
			<div class="link">Made with <a href="https://defold.com/" target="_blank">Defold</a></div>
{{/html5.show_made_with_defold}}
		</div>
	</div>
	<!-- -->
	<script>
		// Fallback to make sure globalThis is available when running in an old
		// browser (available from Chome 71)
		// https://github.com/defold/defold/issues/10503
		if (typeof globalThis === 'undefined') {
			window.globalThis = window;
		}
	</script>
	<script id='engine-loader' type='text/javascript' src="dmloader.js"></script>
	<script id='engine-setup' type='text/javascript'>
		// From here you can configure game startup parameters via the CUSTOM_PARAMETERS object,
		// override ProgressView to create your own loader. See dmloader.js for more details.
	</script>
	<script id='engine-start' type='text/javascript'>
		var runningFromFileWarning = document.getElementById("running-from-file-warning");
		if (window.location.href.startsWith("file://")) {
			runningFromFileWarning.style.display = "block";
		}
		else {
			EngineLoader.load("canvas", "{{exe-name}}");
			runningFromFileWarning.parentNode.removeChild(runningFromFileWarning);
		}
	</script>
</body>
</html>
